<template>
  <h1>App</h1>
  <div>
    <!-- v-on:简写为'@' -->
    <!-- v-bind:简写为':' -->
    <div>
      <!-- v-text:就是操作DOM的innerText -->
      <!-- v-html:就是操作DOM的innerHtml -->
      <div v-text="msg1"></div>
      <div v-html="msg2"></div>
    </div>

    <div>
      <!-- v-show:频繁隐藏和显示，操作display：none -->
      <h3 v-show="title1">v-show只隐藏</h3>

      <!-- v-if:是真正得到创建和销毁 -->
      <h3 v-if="title1">v-if会销毁</h3>
    </div>

    <div>
      <h2 v-bind:title="title2">鼠标悬浮我身上</h2>
      <h2 :title="title2">鼠标悬浮我身上</h2>
    </div>

    <div>
      <h3 v-if="week === 1">今天星期一</h3>
      <h3 v-else-if="week === 2">今天星期二</h3>
      <h3 v-else-if="week === 3">今天星期三</h3>
      <h3 v-else-if="week === 4">今天星期四</h3>
      <h3 v-else-if="week === 5">今天星期五</h3>
      <h3 v-else-if="week === 6">今天星期六</h3>
      <h3 v-else="week">周一到周六都不是,今天是星期天</h3>
    </div>

    <hr />

    <!-- v-for练习 -->
    <h3>v-for:</h3>
    <div>
      <div v-for="item in 8">{{ item }}</div>
      <div v-for="(item, index) in [111, 222, 333, 444]">
        {{ index }}--{{ item }}
      </div>

      <ul>
        <li v-for="item in hobbys">{{ item }}</li>
      </ul>

      <div v-for="(v, k) in user">{{ k }}-{{ v }}</div>

      <br />

      <div v-for="item in moves" :key="item.id">
        <input type="checkbox" />{{ item.name }}
      </div>
      <button @click="addMoves">添加电影</button>
    </div>

    <hr />

    <!-- tab切换 -->
    <div class="box">
      <div class="menu">
        <ul>
          <li class="list" v-for="(item, index) in list" :key="index" 
           @click="hide(index)" :class="{ active:currentTab == index}">
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="content" v-for="(item, index) in tab" :key="index" v-show="currentTab === index">
        {{ item }}
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref } from "vue";
const msg1 = ref("hello");
const msg2 = ref("<b>hello</b>");
const title1 = ref(false);
const title2 = ref("666777");
const week = ref(3);
const hobbys = ref(["刷抖音", "逃课", "跑路", "玩王者"]);
const user = ref({ name: "小白", age: 18 });

let list = ref(["html", "js", "vue"]);
let tab = ref(["html练习", "js练习", "vue练习"]);
let currentTab = ref(0);
let hide = (index) => {
  currentTab.value = index;
};

const moves = ref([
  { id: 1, name: "速度与激情" },
  { id: 2, name: "焚城" },
  { id: 3, name: "唐人街探案" },
]);

const addMoves = () => {
  moves.value.unshift({ id: 4, name: "画江湖之不良人" });
};
</script>

<style  scoped>
* {
  padding: 0;
  margin: 0;
}

.box {
  width: 600px;
  height: 300px;
  border: 1px solid skyblue;
  margin: 50px auto;
}

.menu .list {
  list-style-type: none;
  float: left;
  cursor: pointer;
  width: 200px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #87ceeb;
  box-sizing: border-box;
}

.content .main {
  padding: 20px;
  display: none;
  text-indent: 20px;
  word-wrap: break-word;
}

.content .selected {
  display: block;
}

.active {
  background-color: pink;
}
</style>

